<template>
	<div class="profile-component">
		<h3>Name:{{ name }}</h3>
		<h3 v-if="!isHidden">Age:{{ age }}</h3>
		<h3 v-if="!isHidden">Double Age:{{ doubleAge }}</h3>
		<button type="button" @click="toggleHide">
			{{ isHidden ? '显示' : '隐藏' }}
		</button>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, ref } from 'vue'
interface Person {
	name: string
	age: number
}
export default defineComponent({
	name: 'PropsEventsDemo',
	props: {
		name: {
			type: String,
			default: ''
		},
		age: {
			type: Number,
			default: 30
		},
		user: {
			type: Object as PropType<Person>,
			required: true
		}
	},
	emits: ['change'],
	setup(props, ctx) {
		const doubleAge = computed(() => {
			return props.user?.age * 2
		})
		const isHidden = ref<boolean>(false)

		const toggleHide = () => {
			isHidden.value = !isHidden.value
			ctx.emit('change', isHidden.value)
		}

		return { doubleAge, isHidden, toggleHide }
	}
})
</script>

<style lang="scss" scoped></style>
